<template>
  <div class="q-mb-md" :id="'attach-' + field.name">
    <div v-if="field.label">
      <q-icon name="stars" size="sm" color="grey-7" class="q-mr-sm" />
      <span class="text-grey-7 text-bold" style="font-size: 1.1em" >{{field.label}}</span>
    </div>
    <q-separator class="q-mb-md" />
    <attachView ref="attach" :attach="attachs" :readonly="!!field.readonly" />
    <div class="hint" v-if="field.hint">{{ field.hint }}</div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import attachView from 'src/components/AttachView.vue';

export default defineComponent({
  name: 'fieldAttach',
  components: {
    attachView
  },
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
    }
  },
  methods: {
    submit () {
      return new Promise((resolve, reject) => {
        this.$refs.attach.do().then(ret => {
          resolve({ name: this.field.name, value: ret });
        });
      })
    }
  },
  computed: {
    attachs () {
      let attachs = !this.field.value ? [] : this.field.value;
      if (typeof attachs === 'string') {
        attachs = JSON.parse(attachs);
      } else {
        attachs = JSON.parse(JSON.stringify(attachs));
      }
      return attachs;
    }
  }
});
</script>
